@UncheckedColor: #eee;
@CheckedColor: #f07600;

.checkbox-com
{
    line-height: 4em;
    position: relative;
    border: 1px solid #ccc;
    height: 1em;
    padding: 0 .5em;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;

    &:hover
    {
        border-color: @CheckedColor;
        cursor: pointer;

        input[type="checkbox"] + div
        {
            background-color: white;
            border-color: @CheckedColor;
        }
    }

    input[type="checkbox"]
    {
        display: none;

        &+div
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: solid .35em @UncheckedColor;
            border-radius: 50%;
            background-color: @UncheckedColor;
            box-sizing: border-box;
            transition: background-color .2s, border-color .2s;
        }

        &:checked + div
        {
            background-color: white;
            border-color: @CheckedColor;
        }
    }
}